<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>watch监听</title>
</head>
<body>
<div id="app">
    <input type="text" v-model='msg'>
    <h3>{{msg}}</h3>
    <button @click='stus[0].name="rose"'>改变</button>
    <h4>{{stus[0].name}}</h4>
</div>
<script type="text/javascript" src="../node_modules/vue/dist/vue.min.js"></script>
<script type="text/javascript">
    //总结一句话:watch 监听的是单个属性
    //基本的数据类型 简单的监视
    //复杂的数据类型  深度监视
    new Vue({
        el: "#app",
        data() {
            return {
                msg: '',
                stus: [{name: 'jack'}]
            }
        }, watch: {
            msg: function (newV, oldV) {
                if (newV === 'tusir') {
                    console.log('tusir来了');
                }
            },
            //监听复杂数据类型 object array 深度监视
            stus: {
                deep: true,//深度监视
                handler: function (newV, oldV) {
                    console.log(newV[0].name);
                }
            }
        }
    })
</script>
</body>
</html>